<template>
	<view class="content">

		<view class="subsection_cont">
			<u-subsection :list="list" :current="state" active-color="#FFCD12" inactive-color="#333" mode="subsection"
				class="subsection" @change="subsectionChange"></u-subsection>
		</view>
		<u-sticky>
			<view class="header" v-if="state == 0">
				<view class="category-list">
					<view class="icon" v-for="(item, index) in categoryList" :key="index" @click="classification(index)">
						<view :class="checkIndex == index ? 'checkNav' : ''">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="tuijian_shop" v-if="state == 0">
			<view class="tuijian_con" v-for="(item, i) in orderlist" :key="i" v-if="orderlist != ''" @click="Detail">
				<view class="sec_center">
					<view class="tableft_img">
						<image :src="item.prize_level_icon"></image>
					</view>
					<view class="center">
						<image :src="item.prize_icon" mode="aspectFit"></image>
					</view>
					<view class="right">
						<text class="name">{{ item.prize_name }}</text>
						<text class="name">价值：￥{{ item.price }}</text>
						<view class="tuijian_btn" v-if="status == 0">
							<view class="zhihuan flexs" @click="gojiesuo(item.order_id, i)" v-if="item.is_locking == 1">
								解锁
							</view>
							<!-- <view class="tihuo flexs" @click="goTihuo(item.order_id)"  v-if="item.is_locking!=1 && item.is_displaces!=1">
								提货
							</view> -->
						</view>
						<view class="tuijian_btn2" v-if="status == 0 || checkIndex == 3">
							<view class="zhihuan flexs" @click="gochehui(item.order_id)"
								v-if="item.is_withdraw_but_show == 1">
								撤回赠送
							</view>
							<view class="tihuo flexs" @click="goChakan(item.order_id)" v-if="item.is_apply_but_show == 1">
								查看申请人
							</view>
						</view>

						<view class="tuijian_btn3" v-if="checkIndex == 1">

							<view>
								提取时间：{{ item.create_time }}
							</view>
						</view>
					</view>

				</view>
				<!-- <view class="tuijian_bottom">
					提示：请在2021/12/21 16:49:16前提取，过期将不能提取和赠送，
					只能置换和拒提
				</view> -->

			</view>
		</view>
		<view class="tuijian" v-if="state == 1">
			<view class="tuijian_con" v-for="(item, i) in orderlist" :key="i" v-if="orderlist != ''" @click="Detail">
				<view class="sec_center">
					<view class="center">
						<image :src="item.cover_pic" mode="aspectFit"></image>
					</view>
					<view class="right">
						<text class="name">{{ item.name }}</text>
						<text class="yuanqi">数量：{{ item.num }}</text>
						<view class="openbtn flexs" @click.stop="goOpenmh(item.id, item.cover_pic)">
							<text>开启</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="emptya flex-column flex-c-c" v-if="orderlist == ''">
			<!-- <image src="https://pd.pdaxiang.com/upload/static/index/null.png"></image> -->
			<text class="size-32 color-h">暂无数据</text>
		</view>
		<u-modal v-model="cheStatus" content="确定撤回赠送吗?" :show-cancel-button="true" @confirm="payConfirm_chehui"></u-modal>
		<u-modal v-model="tuiheStatus" content="确定退盒吗?" :show-cancel-button="true" @confirm="payConfirm_tuihe"></u-modal>
		<u-popup mode="center" v-model="zengsongStatus" border-radius="20">
			<view class="zengsong_popop">
				<view class="pop_top">请输入赠送好友的手机号</view>
				<view class="pop_title">（请确认该手机号已注册，赠送后不可反悔）</view>
				<view class="input">
					<image :src="iconurl + '/static/user/shouji.png'"></image>
					<input type="number" placeholder="请输入手机号" v-model="mobile" />
				</view>
				<view class="bombtn flexs">
					<view class="right_bom flexs" @click="submitZengsong">
						确定
					</view>
					<view class="left_bom flexs" @click="backzengsong">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" v-model="shenqingStatus" border-radius="20" :closeable="true">
			<view class="shenqing_popop">
				<view class="pop_top">申请人</view>
				<view class="sec">
					<view class="top">
						<view class="left">
							<image :src="shenData.avatar"></image>
							<view class="name">
								<text class="name_text">{{ shenData.nickname }}</text>
								<text class="name_time">{{ shenData.create_time }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="liuyan" v-if="shenData.status == 1">
					<scroll-view scroll-y="true">
						<view>
							{{ shenData.content }}
						</view>
					</scroll-view>
				</view>
				<view class="liuyan flexs" v-else>
					暂无申请人
				</view>
				<view class="bombtn flexs" v-if="shenData.status == 1">
					<view class="right_bom flexs" @click="shenqingsubmit(1)">
						同意
					</view>
					<view class="left_bom flexs" @click="shenqingsubmit(2)">
						拒绝
					</view>
				</view>
			</view>
		</u-popup>
		<view class="footer" v-if="state == 0">
			<view class="left flexs" @click.stop="goDuihuan()" v-if="but.is_recovery_but == 1">
				拒提
			</view>
			<view class="left flexs" @click.stop="goZengsong()" v-if="but.is_give_but == 1">
				赠送
			</view>
			<view class="left flexs" @click.stop="goSend()" v-if="but.is_send_but == 1">
				发货
			</view>
		</view>
		<u-modal v-model="duistu" content="确定要全兑吗？" :show-cancel-button="true"
			@confirm="$u.debounce(goQuandui, 500)"></u-modal>


		<u-modal v-model="quanstatu" :content="qdstatusCont" :title="qdtitle" @confirm="subQuanduiSeo"
			@cancel="subQuanduiSeo"></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			duistu: false,//全兑确认弹窗1
			qdstatusCont: "",
			qdtitle: "",//全兑title
			quanstatu: false,//全兑成功弹出开关
			statusCont: "",//是否成功弹出
			cheStatus: false,//撤回确认弹窗
			shenqingStatus: false,//申请确认弹窗状态
			zengsongStatus: false,//赠送确认弹窗状态
			tuiheStatus: false,//退盒确认弹窗状态
			money: 10,
			backmineList: {},
			list: [
				{
					name: '商品'
				},
				{
					name: '盲盒'
				},
			],
			checkIndex: 0,
			categoryList: [
				{
					name: '全部'
				},
				{
					name: '已提取'
				},
				{
					name: '已拒提'
				},
				{
					name: '已赠送'
				},
				{
					name: '已领取'
				}
			],
			state: 0,
			Shouhuoshow: false,
			orderlist: [],
			page: 1,
			status: 0,
			order_id: '', //订单id
			jimaiyulan: {},
			allStatus: false,
			total_recovery_price: '',
			prize_level: "",//发货等级
			sendOrderList: {
				address: {},
				prize_list: {},
			},//发货预览获取到的数据
			duihuanData: {},
			mobile: "",
			shenData: {},//查看申请人数据
			totalPage: 1,
			but: {},
			iconurl: this.$configs.urls
		};
	},
	onLoad(option) {
		if (option) {
			this.state = option.state
		}
	},
	// onBackPress(e){
	//   ////console.log("监听返回按钮事件",e);
	//   uni.switchTab({
	//   	  url:"/pages/index/user"
	//   })
	//   return true;
	// },
	onShow() {
		uni.$on('changedz', res => {
			////console.log(res);
			this.sendOrderList.address = res.local;
			this.sendOrderList.address.address_id = res.local.id;
			uni.$off('changedz');
		});
		this.getlist()
	},
	onPullDownRefresh() {
		this.page = 1;
		this.orderlist = [];
		this.getlist();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
		clearTimeout();
	},
	onReachBottom() {
		// if(this.page>=this.totalPage){
		// 	return;
		// }
		this.page++;
		this.getlist(2);
	},
	onHide() {
		this.page = 1;
		// this.$refs.jimaiStatus.close();
	},
	methods: {
		payConfirm_chehui() {
			let data = {
				order_id: this.order_id
			}
			this.$Request.get(this.$api.order.withdrawApply, data).then(res => {
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
				setTimeout(() => {
					this.page = 1;
					this.orderlist = []
					this.getlist()
				}, 800)
				clearTimeout();
			});
		},
		//查看申请同意或者拒绝
		shenqingsubmit(type) {
			let data = {
				m_apply_id: this.shenData.m_apply_id,
				m_detail_id: this.shenData.m_detail_id,
				order_prize_id: this.shenData.order_prize_id,
				type: type,
			}
			this.$Request.get(this.$api.order.applyOperation, data).then(res => {
				this.shenqingStatus = false;
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
				setTimeout(() => {
					this.page = 1;
					this.orderlist = []
					this.getlist()
				}, 800)
				clearTimeout();
			});
		},
		goOpenmh(id, cover_pic) {
			uni.navigateTo({
				url: "/orderPage/index/kaihe?id=" + id
			})
		},
		Detail() {

		},
		gochehui(order_id) {
			this.order_id = order_id;
			this.cheStatus = true;
		},
		gojiesuo(order_id, index) {
			let data = {
				order_id: order_id
			}
			this.$Request.get(this.$api.user.unlock, data).then(res => {
				this.orderlist[index].is_locking = 0
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
			});
		},
		goChakan(order_id) {
			let data = {
				order_id: order_id
			}
			this.$Request.get(this.$api.order.getApplyDetail, data).then(res => {
				this.shenqingStatus = true;
				this.shenData = res.data;
			});
		},
		goTihuo(order_id) {
			uni.navigateTo({
				url: "/userPage/user/order/storeDetail?order_id=" + order_id
			})
		},
		//确定拒提
		submitZengsong() {
			if (this.mobile == '') {
				uni.showToast({
					title: "请输入赠送好友的手机号",
					icon: "none"
				})
				return
			}
			let data = {
				order_id: this.order_id,
				mobile: this.mobile
			}
			this.$Request.post(this.$api.order.give, data).then(res => {
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
				this.zengsongStatus = false;
				setTimeout(() => {
					this.getlist()
				}, 800)
				clearTimeout();
			});
		},
		//确定拒提
		submitDuihuan() {
			let data = {
				order_id: this.order_id,
			}
			this.$Request.post(this.$api.order.exchange, data).then(res => {
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
				setTimeout(() => {
					this.getlist()
				}, 800)
				clearTimeout();
			});
		},
		//关闭确认弹窗
		subQuanduiSeo() {
			this.page = 1;
			this.getlist()
		},
		//全兑关闭弹窗
		quanduiSeo() {
			this.page = 1;
			this.getlist()
		},
		//全兑
		goQuandui() {
			this.$Request.post(this.$api.order.exchangeAll).then(res => {
				this.qdtitle = res.msg
				this.qdstatusCont = "获得" + res.data.recovery_price + "大王币"
				this.quanstatu = true;
			});
		},
		goDuihuan() {
			uni.navigateTo({
				url: "/userPage/user/order/duihuanlist"
			})
		},
		goZengsong() {
			uni.navigateTo({
				url: "/userPage/user/order/zengsonglist"
			})
		},
		goSend() {
			uni.navigateTo({
				url: "/userPage/user/order/sendlist"
			})
		},
		backzengsong() {
			this.zengsongStatus = false
		},
		backduihuan() {
		},
		classification(i) {
			this.page = 1;
			this.checkIndex = i;
			this.status = i;
			this.orderlist = [];
			this.allStatus = false;
			this.getlist();
		},
		subsectionChange(e) {
			this.state = e
			this.checkIndex = 0
			this.status = 0
			this.page = 1;
			if (e == 2) {
				return
			}
			this.getlist();
		},

		getlist(type) {
			let data = {
				page: this.page,
				status: this.status
			};
			uni.showLoading({
				title: '加载中...'
			});
			if (this.state == undefined) {
				this.state = 0
			}
			let urlapi = ''
			if (this.state == 0) {
				urlapi = this.$api.order.orderList
			} else if (this.state == 1) {
				urlapi = this.$api.order.userBoxList
			}
			this.$Request.get(urlapi, data).then(res => {
				uni.hideLoading();
				if (type == 2) {
					this.orderlist = this.orderlist.concat(res.data.list);
				} else {
					this.orderlist = res.data.list;
				}
				this.totalPage = res.data.totalPage
				this.but = res.data.but
			});
		},

	}
};
</script>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	background: #ffffff;

	.footer {
		width: 750rpx;
		height: 110rpx;
		background: #fff;
		position: fixed;
		z-index: 999;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 20rpx;
		box-shadow: 0px 3rpx 10rpx 1px rgba(0, 0, 0, 0.1608);

		.left {
			width: 150rpx;
			height: 70rpx;
			background: #27438B;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: white;
			margin-right: 20rpx;
		}

		.right {
			width: 150rpx;
			height: 70rpx;
			background: #27438B;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: white;
		}
	}

	.shenqing_popop {
		width: 640rpx;
		min-height: 480rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		padding: 20rpx 0 67rpx 0;

		.liuyan {
			padding: 0 30rpx;

			view {
				max-height: 240rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.sec {
			margin-left: 20rpx;
			margin-right: 20rpx;
			padding: 20rpx;
			margin-bottom: 10rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

					.name {
						display: flex;
						flex-direction: column;

						padding-left: 12rpx;

						.name_text {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						.name_time {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							margin-top: 10rpx;
						}
					}
				}

				.right {
					display: flex;
					align-items: center;
					flex-direction: column;

					image {
						width: 34rpx;
						height: 34rpx;
						padding-right: 18rpx;
					}

					text {
						font-size: 20rpx;
						color: #ffffff;
					}
				}
			}
		}

		.pop_top {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			display: flex;
			justify-content: center;
		}

		.pop_title {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			margin-top: 16rpx;
		}

		.bombtn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 100rpx;

			.left_bom {
				width: 238rpx;
				height: 65rpx;
				background: #999999;
				border-radius: 20rpx;
				color: #FFFFFF;
			}

			.right_bom {
				width: 238rpx;
				height: 65rpx;
				background: #6792DD;
				border-radius: 20rpx;
				color: #FFFFFF;
			}
		}
	}


	.tuijian_shop {
		background: #ffffff;
		padding-top: 20rpx;
		padding-bottom: 120rpx;
		position: relative;

		.sec_right {
			position: absolute;
			right: 40rpx;
			top: 40rpx;

			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #000000;
			}
		}

		.sec_bottom {
			.view_title {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.bom {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 22rpx;

				.left {
					display: flex;
					align-items: center;

					text:nth-child(1) {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
						max-width: 240rpx;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}

				.right {
					font-size: 29rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					text-align: center;
					line-height: 24rpx;
					background: #fd8e1b;
					border-radius: 10rpx;
					padding: 8rpx 26rpx 8rpx 26rpx;
				}
			}
		}

		.tuijian_con {
			width: 710rpx;
			margin: 0 auto;
			padding: 20rpx;
			background-size: 100% 100% !important;
			background-repeat: no-repeat !important;
			margin-bottom: 10rpx;
			border-radius: 20rpx;
			box-shadow: 0px 3px 14px rgba(0, 0, 0, 0.16);

			.tuijian_bottom {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				letter-spacing: 2rpx;
			}

			.sec_center {
				width: 710rpx;
				margin: 0 auto;
				display: flex;
				position: relative;

				.center {
					padding: 10rpx 0 10rpx 0;

					image {
						width: 240rpx;
						height: 248rpx;
						border-radius: 10rpx;
					}
				}

				.tableft_img {
					position: absolute;
					left: -10rpx;
					top: -10rpx;
					z-index: 99;

					image {
						// width: 54rpx;
						// height: 58rpx;
						width: 65rpx;
						height: 35rpx;
					}
				}

				.right {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					padding: 60rpx 20rpx 0 20rpx;
					box-sizing: border-box;

					.name {
						max-width: 340rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
						margin-top: 6rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-align: justify;
						overflow: hidden;
					}

					.tuijian_btn2 {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						margin-top: 20rpx;

						view {
							width: 160rpx;
							height: 50rpx;
							opacity: 1;
							border-radius: 20rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}

						view:nth-child(2) {
							margin-left: 20rpx;
						}

						.zhihuan {
							background: #999999;
						}

						.tihuo {
							background: #6792DD;
						}

						.zengsong {
							background: #F96B2D;
						}

						.duihuan {
							background: #E6382F;
						}
					}

					.tuijian_btn3 {
						flex-wrap: wrap;
						margin-top: 20rpx;

						view {
							height: 40rpx;
							opacity: 1;
							border-radius: 20rpx;
							font-size: 20rpx;
							font-family: PingFang SC;
						}
					}

					.tuijian_btn {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						margin-top: 40rpx;

						view {
							width: 140rpx;
							height: 60rpx;
							opacity: 1;
							border-radius: 20rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}

						.zhihuan {
							background: #C388C0;
						}

						.tihuo {
							background: #6792DD;
						}

						.zengsong {
							background: #F96B2D;
						}

						.duihuan {
							background: #E6382F;
						}
					}
				}
			}
		}
	}

	.tuijian {
		background: #ffffff;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		position: relative;

		.sec_right {
			position: absolute;
			right: 40rpx;
			top: 40rpx;

			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #000000;
			}
		}

		.sec_bottom {
			.view_title {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.bom {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 22rpx;

				.left {
					display: flex;
					align-items: center;

					text:nth-child(1) {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
						max-width: 240rpx;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}

				.right {
					font-size: 29rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					text-align: center;
					line-height: 24rpx;
					background: #fd8e1b;
					border-radius: 10rpx;
					padding: 8rpx 26rpx 8rpx 26rpx;
				}
			}
		}

		.tuijian_con {
			width: 710rpx;
			margin: 0 auto;
			padding: 20rpx;
			background-size: 100% 100% !important;
			background-repeat: no-repeat !important;
			margin-bottom: 10rpx;
			border-radius: 20rpx;
			box-shadow: 0px 3px 14px rgba(0, 0, 0, 0.16);

			.sec_center {
				width: 710rpx;
				margin: 0 auto;
				display: flex;
				position: relative;

				.center {
					padding: 10rpx 0 10rpx 0;

					image {
						width: 240rpx;
						height: 248rpx;
						border-radius: 10rpx;
					}
				}

				.right {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					padding: 0 20rpx 0 0;
					box-sizing: border-box;

					.openbtn {
						width: 140rpx;
						height: 60rpx;
						background: #6792DD;
						border-radius: 10rpx;

						text {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}
					}

					.name {
						max-width: 340rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
						margin-top: 6rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-align: justify;
						overflow: hidden;
					}

					.yuanqi {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}

					.cont {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #E80303;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-align: justify;
						overflow: hidden;
						padding-right: 20rpx;
						box-sizing: border-box;
					}

					.bom {
						min-width: 320rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 2rpx;

						.left {
							display: flex;
							align-items: center;

							text:nth-child(1) {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #000000;
							}
						}

						.right {
							font-size: 29rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #ffffff;
							text-align: center;
							line-height: 24rpx;
							background: #fd8e1b;
							border-radius: 10rpx;
							padding: 16rpx 26rpx 16rpx 26rpx;
						}
					}
				}
			}
		}
	}

	.checkNav {
		color: #1290FF !important;
		font-size: 30rpx !important;
		font-family: PingFang SC;
		font-weight: bold;
		border-bottom: 2px solid #6792DD;
		padding-bottom: 10rpx;
	}

	.subsection_cont {
		width: 750rpx;
		background: #FFFFFF;
		padding: 10rpx 0;
		box-sizing: border-box;

		.subsection {
			width: 710rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			background: #FFFFFF;
		}
	}

	.header {
		width: 750rpx;
		margin-bottom: 26rpx;

		.category-list {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: space-between;
			flex-flow: wrap;
			padding: 20rpx 20rpx;
			background: #ffffff;

			.icon {
				display: flex;
				flex-flow: wrap;
				justify-content: center;
				font-size: 28rpx;
				margin-right: 50rpx;

				view {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #717171;
				}
			}
		}
	}
}</style>
